@(directory: String, data: Seq[Seq[Html]], index: Seq[Html], footer: Html, backreference: String)

<link rel="stylesheet" media="screen" href="@backreference@routes.Assets.at("css/templates/slim.css")">
<style type="text/css">
#s3index-root .file {
  background-image: url('@backreference@routes.Assets.at("img/file.gif")');
  background-repeat: no-repeat;
  padding-left: 25px;
  padding-top: 2px;
  padding-bottom: 2px;
}
#s3index-root .dir {
  background-image: url('@backreference@routes.Assets.at("img/folder.gif")');
  background-repeat: no-repeat;
  padding-left: 25px;
  padding-top: 2px;
  padding-bottom: 2px;
}
#s3index-root .back {
  background-image: url('@backreference@routes.Assets.at("img/back.gif")');
  background-repeat: no-repeat;
  padding-left: 25px;
  padding-top: 2px;
  padding-bottom: 2px;
}
</style>
<div class="title">@directory</div>
@if(!data.isEmpty){
<table>
	@if(!data(0).isEmpty){
	<tr>
		@for(header <- data(0)){
		  <th>@header</th> 
		}
	</tr>
	}
	<hr />
	@for(row <- data.tail){
	<tr>
		@for(value <- row; if(data(0).length >= row.length)){
		<td>@value</td> } @for(value <- 0 until (data(0).length - row.length)){
		<td></td> }
	</tr>
	}
</table>
}
@if(index.size > 1){
<div class="nav">
  <table>
    <tr valign="top">
      @for(idx <- index){
         <td>@idx</td>
      }
    </tr>
  </table>
</div>
}
<br>
<hr>
<div class="footer">@footer</div>
